<template>
	<view class="appointment">
		<view class="info" v-for="(item,index) in list" :key="item.id">
			<image :src="item.image_url" mode="scaleToFill" style="width: 170rpx; height: 170rpx;"></image>
			<view>
				<text>{{item.items_title}}</text>
				<text>
					预约到店时间:<text>{{item.arrive_time}}</text>
				</text>
				<text>
					预约门店:
					<text>{{item.service_title}}</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.getAppointment();
		},
		data() {
			return {
				list: null,
				page: 1,
				pageSize: 6,
				countPages: null,
			};
		},
		methods: {
			async getAppointment() {
				let openids = this.$store.state.userinfo.openid;
				const res = await this.$myrequest({
					url: `Subscribe/getSubscribe?openid=${openids}&pageSize=${this.pageSize}&page=${this.page}`,
				});
				this.list = res.data.data;
				this.countPages = res.data.countPage;
			},

			// 懒加载
			async reachBottom() {
				let openids = this.$store.state.userinfo.openid;
				this.page = ++this.page;
				if (this.page <= this.countPages) {
					let path =
						`Subscribe/getSubscribe?pageSize=${this.pageSize}&page=${this.page}&openid=${openids}`;
					let res = await this.$myrequest({
						url: path
					});
					this.list = this.list.concat(res.data.data);
				};
			},
		},
		onReachBottom() {
			this.reachBottom();
		},
	}
</script>

<style lang="scss">
	.appointment {
		padding: 30rpx;
		width: 100%;
		height: 100%;
		background-color: #F5F8FA;
	}

	.info {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		@include shuipingchuijuzhong;
		padding: 20rpx;

		>view {
			vertical-align: top;
			display: inline-block;
			width: calc(100% - 170rpx);
			padding-left: 30rpx;

			>text {
				display: inline-block;
				width: 100%;

				&:first-of-type {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}

				&:nth-of-type(2) {
					color: #999999;

					text {
						&:last-of-type {
							color: #2DD1BC;
							margin-left: 20rpx;
						}
					}
				}

				&:last-of-type {
					color: #999999;

					text {
						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

			}
		}
	}
</style>
